<%@ page pageEncoding="utf-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html lang="en">
<head>

    <!-- start: Meta -->
    <meta charset="utf-8">
    <title>Bootstrap Metro Dashboard by Dennis Ji for ARM demo</title>
    <meta name="description" content="Bootstrap Metro Dashboard">
    <meta name="author" content="Dennis Ji">
    <meta name="keyword" content="Metro, Metro UI, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
    <!-- end: Meta -->

    <!-- start: Mobile Specific -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- end: Mobile Specific -->

    <!-- start: CSS -->
    <link id="bootstrap-style" href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
    <link id="base-style" href="css/style.css" rel="stylesheet">
    <link id="base-style-responsive" href="css/style-responsive.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,latin-ext' rel='stylesheet' type='text/css'>
    <!-- end: CSS -->


    <!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <link id="ie-style" href="css/ie.css" rel="stylesheet">
    <![endif]-->

    <!--[if IE 9]>
    <link id="ie9style" href="css/ie9.css" rel="stylesheet">
    <![endif]-->

    <!-- start: Favicon -->
    <link rel="shortcut icon" href="/img/favicon.ico">
    <!-- end: Favicon -->


    <%--<script>--%>
        <%--if(window.top!==window){--%>
            <%--window.top.location.href=window.location.href;--%>
        <%--}--%>
    <%--</script>--%>


</head>

<body>
<!-- start: Header -->

<!-- start: Content -->
<div id="content" class="span10">



    <ul class="breadcrumb">
        <li>
            <i class="icon-home"></i>
            <a href="/firstPage.do">主页</a>
            <i class="icon-angle-right"></i>
        </li>
        <li><a href="#">数据概述</a></li>
    </ul>
    <strong>${message}</strong>
    <div class="row-fluid">

        <div class="span3 statbox purple" onTablet="span6" onDesktop="span3">
            <div class="number">${fn:length(sessionScope.userList)}<i class="icon-arrow-up"></i></div>
            <div class="title">users</div>
            <div class="footer">
                <a href="#"> 用户数量</a>
            </div>
        </div>
        <div class="span3 statbox green" onTablet="span6" onDesktop="span3">
            <div class="number">${fn:length(sessionScope.roleList)}<i class="icon-arrow-up"></i></div>
            <div class="title">roles</div>
            <div class="footer">
                <a href="#"> 角色数量</a>
            </div>
        </div>
        <div class="span3 statbox blue noMargin" onTablet="span6" onDesktop="span3">
            <div class="number">${fn:length(sessionScope.permissionList)}<i class="icon-arrow-up"></i></div>
            <div class="title">permissions</div>
            <div class="footer">
                <a href="#"> 权限数量</a>
            </div>
        </div>

    </div>


    <div class="row-fluid">


        <div class="widget span10 red" >

            <h2><span class="glyphicons pie_chart"><i></i></span> 角色-权限关系表</h2>

            <hr>

            <div class="content">

                <table class="table table-hover table-striped table-bordered">
                    <thead>
                    <tr>
                        <c:if test="${! empty sessionScope.permissionList}">
                                    <th>关系表</th>
                            <c:forEach var="per" items="${sessionScope.permissionList}">
                                    <th>${per.name}</th>
                            </c:forEach>
                        </c:if>
                    </tr>
                    <c:if test="${! empty sessionScope.roleList}">
                        <c:forEach var="role" items="${sessionScope.roleList}">
                            <tr>
                                <th>${role.name}</th>
                                <c:forEach var="per" items="${sessionScope.permissionList}">
                                    <td>
                                        <c:if test="${fn:contains(role.permission, per.id)}">
                                                ✔
                                        </c:if>
                                    </td>
                                </c:forEach>
                            </tr>
                        </c:forEach>
                    </c:if>

                </table>

            </div>
        </div>


    </div>


</div><!--/.fluid-container-->
<!-- start: JavaScript-->

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-migrate-1.0.0.min.js"></script>

<script src="js/jquery-ui-1.10.0.custom.min.js"></script>

<script src="js/jquery.ui.touch-punch.js"></script>

<script src="js/modernizr.js"></script>

<script src="js/bootstrap.min.js"></script>

<script src="js/jquery.cookie.js"></script>

<script src='js/fullcalendar.min.js'></script>

<script src='js/jquery.dataTables.min.js'></script>

<script src="js/excanvas.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.pie.js"></script>
<script src="js/jquery.flot.stack.js"></script>
<script src="js/jquery.flot.resize.min.js"></script>

<script src="js/jquery.chosen.min.js"></script>

<script src="js/jquery.uniform.min.js"></script>

<script src="js/jquery.cleditor.min.js"></script>

<script src="js/jquery.noty.js"></script>

<script src="js/jquery.elfinder.min.js"></script>

<script src="js/jquery.raty.min.js"></script>

<script src="js/jquery.iphone.toggle.js"></script>

<script src="js/jquery.uploadify-3.1.min.js"></script>

<script src="js/jquery.gritter.min.js"></script>

<script src="js/jquery.imagesloaded.js"></script>

<script src="js/jquery.masonry.min.js"></script>

<script src="js/jquery.knob.modified.js"></script>

<script src="js/jquery.sparkline.min.js"></script>

<script src="js/counter.js"></script>

<script src="js/retina.js"></script>

<script src="js/custom.js"></script>
<!-- end: JavaScript-->

</body>
</html>
